<template>
  <div :class="flag ? 'swich-color status-on' : 'swich-color status-off'">
    <el-switch
      v-model="flag"
      active-color="#CC9999"
      inactive-color="#003366"
      width="60px"
      inline-prompt
      active-text="白天"
      inactive-text="黑夜"
      size="large"
      @change="handleFlagChange"
    />
  </div>
</template>

<script setup>
  import { ref, computed } from "vue"
  import { useStore } from "vuex"
  // 页面数据
  const store = useStore()
  const flag = ref(true)
  flag.value = store.state.weblog.status
  // 事件处理
  const handleFlagChange = () => {
    const status =  flag.value
    store.commit("weblog/changeWeblogBgcMutation", { status })
  }
</script>

<style scoped>
.swich-color {
  padding: 10px;
}

.status-off {
  background-color: #eee;
  box-shadow: 0 0 10px #eee;
}
.status-on {
  background-color: #666;
  box-shadow: 0 0 10px #666;
}
</style>
